<template>
  <div class="page-container">
    <div class="operators">
      <el-select
        v-model="searchParams.unitip"
        @change="monitorLogsApi"
        style="width: 200px; margin-right: 10px"
        clearable
        placeholder="请选择设备IP"
      >
        <el-option
          v-for="(item, index) in machines"
          :key="index"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="monitorLogsApi">查询</el-button>
      <el-button type="danger" @click="clearApi">清空日志</el-button>
    </div>
    <el-table
      :data="tableData"
      :height="tableHeight"
      style="width: 100%; margin-bottom: 20px"
      align="center"
      border
    >
      <el-table-column prop="unitip" label="设备ip"></el-table-column>
      <el-table-column prop="count" label="数量值"></el-table-column>
      <el-table-column prop="unitname" label="设备名称"></el-table-column>
      <el-table-column prop="datetime" label="通知时间"></el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParams.currentPage"
        :page-sizes="[10, 20, 50, 80]"
        :page-size="searchParams.pageSize"
        :total="count"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  monitorTypes,
  monitorLogs,
  logsClear,
} from "@/api/videos/monitorPartners";
import { autoTableHeight } from "@/utils/tools";
export default {
  data() {
    return {
      searchParams: {
        partnerName: "",
        unitip: "",
        currentPage: 1,
        pageSize: 10,
      },
      formData: {},
      monitorPartnersVisible: false,
      tableData: [],
      count: 0,
      tableHeight: 600,
      unitOpts: [],
      unitIndex: undefined,

      machines: [],
    };
  },
  created() {
    autoTableHeight(280, (e) => {
      this.tableHeight = e;
    });
    this.monitorTypesApi();
    this.monitorLogsApi();
  },
  methods: {
    clearApi() {
      let { unitip } = this.searchParams;
      if (!unitip) {
        this.$message.error("请选择需要删除日志的设备");
        return;
      }
      this.$confirm(`此操作将永久删除${unitip}】的日志, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        logsClear({
          unitip,
        }).then((res) => {
          this.$message.success("成功清空日志");
          this.monitorLogsApi();
        });
      });
    },
    monitorTypesApi() {
      monitorTypes().then((res) => {
        this.machines = res.data;
      });
    },
    monitorLogsApi() {
      let data = { ...this.searchParams };
      monitorLogs(data).then((res) => {
        let { data, count } = res.data;
        this.count = count;
        this.tableData = data;
      });
    },
    handleSizeChange(val) {
      this.searchParams.pageSize = val;
      this.monitorLogsApi();
    },
    handleCurrentChange(val) {
      this.searchParams.currentPage = val;
      this.monitorLogsApi();
    },
  },
};
</script>

<style scoped>
.operators {
  margin-bottom: 16px;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
}
.el-cascader {
  width: 100%;
}
.dialog-btns {
  text-align: center;
}
</style>
